<template>
  <ph-view class="home">
    <ph-blockquote>安装引入（目前只能按需引）</ph-blockquote>
    <ph-pretty>
        {{install}}
    </ph-pretty>
    <ph-blockquote>安装引入（目前只能按需引）</ph-blockquote>
    <ph-pretty>
        {{usage}}
    </ph-pretty>
    <ph-list title="组件列表">
      <ph-list-item style="cursor:pointer" v-for="item in cmps" @click="onClick(item.to)" :key="item.name">{{item.name}}</ph-list-item>
    </ph-list>
  </ph-view>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
import { PhList,PhListItem,PhBlockquote,PhView } from '@/components'
import * as Data from "../data/home"

export default defineComponent({
  name: "Home",
  components: {
    PhList,PhListItem,PhBlockquote,PhView
  },
  setup(){
    const router = useRouter()
    const onClick = (to:string)=>{
      router.push(to)
    }
    return {
      ...Data,
      onClick
    }
  }
});
</script>
